<template>
	<view class="afterSale">
		<view class="" v-for="(i, index) in goods.goods" :key="index" style="margin-bottom: 20rpx;">
				<view class="item_content" >
					<image :src="i.image||'/pagesB/static/微信图片_20201124091755.png'" mode=""></image>
					<view class="ItemContent">
						<view class="title">{{i.name}}</view>
						<view class="parameter">
							<view class="parameter1">{{ i.option_name }}</view>
						</view>
						<view class="price_ctrlbox">
							<view class="price">￥{{ i.price }}</view>
							<view class="ctrlbox">x{{ i.quantity }}</view>
						</view>
					</view>
				</view>
		<view class="order_title">
			<view class="title_left">商品评分</view>
			<view class="radio">
				<uni-rate :size="18" v-model="i.active"/>
			</view>
		</view>
		<view class="order_title">
			<textarea v-model="i.reason" placeholder="说点对宝贝的评价吧……" />
		</view>
		<view class="voucher">
			<view class="voucher_title">
				上传图片
			</view>
			<view class="voucher_content">
				<image v-if="i.img!= ''" v-for="e in i.img" :key="e" :src="'http://'+e" class="sctu"></image>
				<view class="jia" :id="i.goods_id" @click="shangchuan">
					+
				</view>
			</view>
		</view>
		</view>
		<view class="button">
			<button type="warn" @click="addmanagement">提交</button>
		</view>
	</view>
</template>

<script>
	import {requestUrl,imageUrl} from '@/common/config.js'
	import md5 from '@/common/api/md5.js'
	import {uniRate} from '@/components/uni-rate/uni-rate.vue'
	export default {
		components: {uniRate},
		data() {
			return {
				img:[],
				reason:'',
				active:1,
				Url:'',
				goods:[],
				data1:{}
			};
		},
		// onShow() {
		// 	this.goods = JSON.parse(uni.getStorageSync('goods'));
		// 	console.log(this.goods)
		// },
		onLoad(option) {
			const eventChannel = this.getOpenerEventChannel()
			  // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
			  eventChannel.on('evaluate', data=> {
				  data.goods.forEach(v=>{
					  v.img=[]
					  v.active=5
					  v.reason=''
				  })
				this.goods=data
				console.log(data)
			  })
		},
		onShow() {
			let time = Math.round(new Date().getTime() / 1000).toString()
			let _this = this
			let Time = ['time', time].join('=')
			let Access_token = ['access_token', this.access_token].join('=')
			let content = ['content=pinet.FeiMao.2017'].join()
			let arr = [content, Time].sort(function(a, b) {
				a - b
			})
			let newarr = md5(arr.join('&'))
			uni.request({
				url: requestUrl+'/app/upload/getUploadConfig',
				method: "GET",
				data: {
					time: time,
					sign: newarr,
				},
				success: function(res) {
					console.log(res)
					_this.Url=res.data.content
				}
			});
		},
		methods:{
			addmanagement(){
				// this.goods.reason=this.reason
				// this.goods.money=this.goods.price*this.goods.quantity
				// this.goods.img=this.img
				// uni.setStorage({
				// 	key: 'goods',
				// 	data: JSON.stringify(this.goods),
				// 	success: function () {
				// 	}
				// });
					let obj={}
					
					this.goods.goods.forEach((v,i)=>{
					    let arr=[];
					    arr.goods_id=v.goods_id;
					    arr.option_id=v.option_id;
					    arr.active=v.active;
					    arr.reason=v.reason;
					    arr.img=v.img;
					    obj[i]=arr;
					
					})
					// this.data1.option_id=this.goods.goods.option_id
					// this.data1.score=this.goods.goods.active
					// this.data1.comment=this.goods.goods.reason
					// this.data1.images=this.goods.goods.img
				// this.data1.goods_id=this.goods.goods.goods_id,
				// this.data1.option_id=this.goods.goods.option_id,
				obj.order_sn=this.goods.order_sn,
				console.log(JSON.stringify(obj))
				this.$request('/app/order/comment','post',{
					access_token:uni.getStorageSync('access_token').replace(/^\"|\"$/g,''),
					data:JSON.stringify(obj)
					// goods_id:this.goods.goods[0].goods_id,
					// option_id:this.goods.goods[0].option_id,
					// order_sn:this.goods.order_sn,
					// score:this.active,
					// comment:this.reason,
					// images:this.img,
				}).then(res=>{
					console.log(res)
				})
			},
			shangchuan(e){
				let _this=this
				console.log(e.target)
				
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res1) => {
						this.$UploadImg(res1.tempFilePaths[0],_this.Url.token).then(res=>{
							_this.goods.goods.forEach(v=>{
								console.log(v)
								if(v.goods_id==e.target.id){
									v.img.push(res.key)
								}
							})
							console.log(_this.goods.goods)
						})
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.afterSale{

		background: #F3F4F5;
		padding-top: 20rpx;
			.item_content {
				display: flex;
				padding: 20rpx;
				border-bottom: 1px solid #eeeeee;
				background-color: #fff;
				margin-bottom: 10rpx;
				image {
					height: 180rpx;
					width: 180rpx;
					margin-right: 16rpx;
				}
				.ItemContent {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.title {
						height: 72rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
					}
					.parameter {
						height: 34rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9da5a8;
					}
					.price_ctrlbox {
						display: flex;
						justify-content: space-between;
					}
					.price {
						font-size: 28rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #111111;
					}
					.ctrlbox {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #9da5a8;
					}
				}
			}
			.order_price1 {
				padding: 0 24rpx 24rpx 24rpx;
			}
			.order_price {
				margin-top: 24rpx;
				height: 100%;
				display: flex;
				justify-content: space-between;
				.price_left {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}
				.price_right {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}
				.price_right1 {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #db1b22;
				}
			}
			.order_title {
				display: flex;
				padding: 30rpx;
				border-bottom: 1px solid #eeeeee;
				background-size: 28rpx 28rpx;
				background-color: #fff;
				.price{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #DB1B22;
				}
				.radio{
					flex: 1;
					display: flex;
					.change{
						display: flex;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						.radio {
							width: 32rpx;
							height: 32rpx;
							background: url(@/static/selected%20active.png) 0px 0px;
							background-size: 32rpx 32rpx;
							margin: 0 10rpx;
							align-items: center;
						}
						.radioActive {
							background: url(@/static/selected／on.png) 0px 0px;
							background-size: 32rpx 32rpx;
						}
					}
				}
				.title_left {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
					margin-right: 30rpx;
				}
				textarea{
					width: 100%;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #9DA5A8;
				}
			}
			.voucher{
				padding: 30rpx;
				background-color: #fff;
				border-bottom: 1px solid #eeeeee;
				.voucher_title{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #111111;
				}
				.voucher_content{
					display: flex;
					margin: auto;
					margin-top: 20px;
					flex-wrap: wrap;
				}
				.sctu{
					width:80px;
					height:80px;
					margin-right: 15px;
				}
				.jia{
					width:80px;
					height:80px;
					background-color:#C8C7CC;
					color:#808080;
					text-align: center;
					line-height: 80px;
					font-size: 30px;
					font-weight: 700;
				}
			}
			.button {
					width: 90%;
					margin: 0 auto;
					padding: 40rpx 0;
					button{
						border-radius: 20px;
						line-height: 80rpx;
					}
				}
	}
</style>
